<script setup lang="ts">

import TemplateCardNew from "@/components/TemplateCardNew/TemplateCardNew.vue";
import {ITempList} from "@/template/type";
import MTemplateCard from "@/components/common/MTemplateCard.vue";
defineProps<{
  templateList: Array<ITempList>;
}>();
const emit = defineEmits(['preview'])
const preview = (cardData: any, index: number) => {
  emit('preview', cardData, r.value[index]);
}

const r = ref<any>(null)

</script>

<template>
  <el-scrollbar>
    <div class="scrollbar-flex-content">
      <div v-for="(item, index) in templateList" :key="index" class="card-box-item">
        <m-template-card ref="r" :card-data="item" @preview="(cardData: any) => preview(cardData, index)"></m-template-card>
      </div>
    </div>
  </el-scrollbar>
</template>

<style scoped lang="scss">
.scrollbar-flex-content {
  display: flex;
}

.el-scrollbar{
  height: initial;
}
</style>